<template>
  <div>
    <!--   -->
    <p>pageRouter: #/slotTest</p>
    <!-- 例子一-->

    <v-child1>
      <template v-slot:default>我会被替换</template>
      <template v-slot:default>点击按钮</template>

      <template v-slot:content1="slotProps"
        >内容<br />
        <hr />
        <div v-for="(item, index) in slotProps.default" :key="index">
          <span> username: {{ item.username }}</span> | age:<span>{{
            item.age
          }}</span>
        </div>
      </template>
    </v-child1>
    <br />
    <!-- 例子二-->
    <!-- 数组都传进去 循环 再通过作用域插槽传每一项出来 就可以进行单独处理了-->
    <v-child2 :list="list">
      <template v-slot:title>测试v-for与作用域插槽的使用</template>
      <template v-slot:default="slotProps">
        <td>{{ slotProps.item.shopName }}</td>
        <td>{{ slotProps.item.price }}</td>
        <td :class="[styleCategory[slotProps.item.category]]">
          {{ slotProps.item.category }}
        </td>
        <td>
          <button @click="($event) => edit(slotProps.item, $event)">
            编辑
          </button>
        </td>
      </template>
    </v-child2>
  </div>
</template>
<script>
import Child1 from './child1.vue'
import Child2 from './child2.vue'
export default {
  name: 'slot',
  components: { 'v-child1': Child1, 'v-child2': Child2 },
  data() {
    return {
      list: [
        { shopName: '衣服', price: 25, category: 1 },
        { shopName: '铅笔', price: 2, category: 2 },
        { shopName: '鞋子', price: 290, category: 3 },
        { shopName: '自动铅笔', price: 5, category: 2 }
      ],
      styleCategory: {
        1: 'red',
        2: 'orange',
        3: 'blue'
      }
    }
  },
  methods: {
    edit(val, e) {
      alert('我正在操作: ' + val.shopName)
      console.log(e)
    }
  },
  activated: {},
  deactivated: {},
  mounted() {}
}
</script>
<style lang="less" scoped>
.red {
  color: red;
}
.orange {
  color: orange;
}
.blue {
  color: blue;
}
</style>
